<template>
	<Post :post="postDetail"/>
	<view class="title">评论</view>
	<template v-if="commentList && commentList.length">
		<view class="comment" v-for="(item1, index1) in commentList" :key="item1.comment_id">
			<Comment :data="item1"/>
			<view class="comment_two">
				<template
				  v-if="item1.comment_two && item1.comment_two.length"
				>
					<view v-for="(item2, index2) in item1.childrenShow	">
						<Comment :data="item2" :isSecond="true"/>
					</view>
					<span
						v-if="item1.reply_count > 2 &&!isUnfold"
						class="shrink"  
						@click="handleUnfold(item1, index1)"
						>
						  — 展开{{item1.reply_count}}条回复
						  <i class="iconfont icon-xiangxiajiantou"></i>
					</span>
					<view class="fold-more" v-if="isUnfold">
						<span
							v-if="item1.reply_count > 2 && item1.childrenShow.length < item1.reply_count"
							class="shrink"  
							@click="handleUnfold(item1, index1)"
							>
							  — 展开更多
							  <i class="iconfont icon-xiangxiajiantou"></i>
						</span> 
						<span
							v-if="item1.childrenShow.length > 5"
							class="shrink fold"
							@click="handleFold(item1, index1)">
							  收起
							  <i class="iconfont icon-xiangshangjiantou"></i>
						</span>
					</view>
					  
				</template>
			</view>
			
		</view>
	</template>
	<up-empty
		v-else
		class="empty_box"
		mode="message"
		text="这里是一片荒草地"
	>
		<span class="click" @click.stop="handleReply">说点什么...</span>
	</up-empty>
	<!-- 评论输入框 -->
	<!-- ////////////////////////////一级评论的输入框 -->
	<reply-input :postId="postDetail.user_post.id" customPlaceholder="写评论"/>
</template>

<script lang="ts" setup>
	import Post from '../../components/post/post.vue'
	import Comment from '../../components/comment/comment.vue'
	import replyInput from '../../components/replyInput/replyInput.vue'
	import { reactive,ref,watch,onMounted } from 'vue'
	import {getPostInfo,getPostComment} from '../../apis/home'
	import { usereplyStore } from '../../store/modules/reply'
	const replyStore = usereplyStore();
	let postDetail = ref({})
	let commentList = ref([
	// 	{
	// 		comment_id:1,
	// 		avatar:'https://img.zcool.cn/community/01795058158d43a84a0d304f64b44d.png@2o.png',
	// 		user_name:'张三',
	// 		content:'今天，塞尔维亚又成为首个同中国共同构建命运共同体的欧洲国家塞尔维亚又成为首个同中国共同构建命运共同体的欧洲塞尔维亚又成为首个同中国共同构建命运共同体的欧洲，充分继续努力把中国建设成为社会主义现代化强国。',
	// 		create_time:'2022-12-03 23:07',
	// 		publish_address:'河南',
	// 		likes_count:13,
	// 		likes_status:true,
	// 		reply_count: 9,
	// 		childrenShow:[],
	// 		comment_two:[
	// 			{
	// 				comment_id:5,
	// 				avatar:'https://img.zcool.cn/community/01795058158d43a84a0d304f64b44d.png@2o.png',
	// 				user_name:'张三',
	// 				content:'22222222222222222222二二八会',
	// 				create_time:'2022-12-03 23:07',
	// 				publish_address:'河南',
	// 				likes_count:13,
	// 				likes_status:true,
	// 			},
	// 			{
	// 				comment_id:5,
	// 				avatar:'https://img.zcool.cn/community/01795058158d43a84a0d304f64b44d.png@2o.png',
	// 				user_name:'张三',
	// 				content:'22222222222222222222二二八会',
	// 				create_time:'2022-12-03 23:07',
	// 				publish_address:'河南',
	// 				likes_count:13,
	// 				likes_status:true,
	// 			},
	// 			{
	// 				comment_id:13,
	// 				avatar:'https://img.zcool.cn/community/01795058158d43a84a0d304f64b44d.png@2o.png',
	// 				user_name:'李四',
	// 				content:'222222222222222222222北京大学博》为题是否续首个同中国共同构建命运共同体的欧洲国家塞尔维亚又成为首个同中国共同构建命运共同体的欧洲塞尔维亚又成为首个同中国共同构建命运共同体的欧洲，充分继续努力把中国建设成为社会主义现民一定发表演讲。',
	// 				create_time:'2022-01-01 11:24',
	// 				publish_address:'江苏',
	// 				likes_count:1,
	// 				likes_status:false,
	// 				"last_comment": "用户ulsXZ_57"
	// 			},
	// 			{
	// 				comment_id:5,
	// 				avatar:'https://img.zcool.cn/community/01795058158d43a84a0d304f64b44d.png@2o.png',
	// 				user_name:'张三',
	// 				content:'22222222222222222222二二八会',
	// 				create_time:'2022-12-03 23:07',
	// 				publish_address:'河南',
	// 				likes_count:13,
	// 				likes_status:true,
	// 			},
	// 			{
	// 				comment_id:16,
	// 				avatar:'https://img.zcool.cn/community/01795058158d43a84a0d304f64b44d.png@2o.png',
	// 				user_name:'李四',
	// 				content:'2222222222222222222222北京大与现代化转型》为题发表演讲。',
	// 				create_time:'2022-01-01 11:24',
	// 				publish_address:'江苏',
	// 				likes_count:1,
	// 				likes_status:false,
	// 			},
	// 			{
	// 				comment_id:5,
	// 				avatar:'https://img.zcool.cn/community/01795058158d43a84a0d304f64b44d.png@2o.png',
	// 				user_name:'张三',
	// 				content:'22222222222222222222二二八会',
	// 				create_time:'2022-12-03 23:07',
	// 				publish_address:'河南',
	// 				likes_count:13,
	// 				likes_status:true,
	// 			},
	// 			{
	// 				comment_id:678,
	// 				avatar:'https://img.zcool.cn/community/01795058158d43a84a0d304f64b44d.png@2o.png',
	// 				user_name:'李四',
	// 				content:'北京大学博雅讲席教授钱乘旦以《文明的生成、延续与现代化转型》为题发表演讲。',
	// 				create_time:'2022-01-01 11:24',
	// 				publish_address:'江苏',
	// 				likes_count:1,
	// 				likes_status:false,
	// 			},
	// 			{
	// 				comment_id:5,
	// 				avatar:'https://img.zcool.cn/community/01795058158d43a84a0d304f64b44d.png@2o.png',
	// 				user_name:'张三',
	// 				content:'22222222222222222222二二八会',
	// 				create_time:'2022-12-03 23:07',
	// 				publish_address:'河南',
	// 				likes_count:13,
	// 				likes_status:true,
	// 			},
	// 			{
	// 				comment_id:5,
	// 				avatar:'https://img.zcool.cn/community/01795058158d43a84a0d304f64b44d.png@2o.png',
	// 				user_name:'张三',
	// 				content:'22222222222222222222二二八会',
	// 				create_time:'2022-12-03 23:07',
	// 				publish_address:'河南',
	// 				likes_count:13,
	// 				likes_status:true,
	// 			},
	// 		]
	// 	},
	// 	{
	// 		comment_id:11,
	// 		avatar:'https://img.zcool.cn/community/01795058158d43a84a0d304f64b44d.png@2o.png',
	// 		user_name:'李四',
	// 		content:'他认为，一个民族如果遗忘自己的优秀传统，就会缺乏文化的创造力、缺乏自主知识体系。',
	// 		create_time:'2022-01-01 11:24',
	// 		publish_address:'江苏',
	// 		likes_count:1,
	// 		likes_status:false,
	// 		reply_count: 2,
	// 		childrenShow:[],
	// 		comment_two:[
	// 			{
	// 				comment_id:10,
	// 				avatar:'https://img.zcool.cn/community/01795058158d43a84a0d304f64b44d.png@2o.png',
	// 				user_name:'李四',
	// 				content:'22222222222222北京大学博雅讲席教授钱乘旦以《文明的生成、延续与现代化转型》为题发表演讲。',
	// 				create_time:'2022-01-01 11:24',
	// 				publish_address:'江苏',
	// 				likes_count:1,
	// 				likes_status:false,
	// 			},
	// 			{
	// 				comment_id:12,
	// 				avatar:'https://img.zcool.cn/community/01795058158d43a84a0d304f64b44d.png@2o.png',
	// 				user_name:'李四',
	// 				content:'222222222222222222222北京大学博雅讲席教授钱乘旦以《文明的生成、延续与现代化转型》为题发表演讲。',
	// 				create_time:'2022-01-01 11:24',
	// 				publish_address:'江苏',
	// 				likes_count:1,
	// 				likes_status:false,
	// 			},
	// 		]
	// 	},
	])
	onMounted(()=>{
		init();
	})
	
	async function init(){
		let pages = getCurrentPages();
		let currentPage = pages[pages.length - 1];  
		let options = currentPage.options;
		console.log(options);

		const {data} = await getPostInfo(options)
		const res = await getPostComment({...options,page:1,pageSize:5})
		console.log(res.data);
		postDetail.value = data;
		commentList.value = res.data;
		console.log(postDetail.value);
	}
	
	let isUnfold = ref(false)
	let dataList = reactive([])
	//监视commentList中展示评论内容的数组childrenShow
	const stopWatch = watch(commentList.value,(newVal,oldVal)=>{
		// console.log(newVal,oldVal);
	   if (newVal.length !== dataList.length) {
	     dataList = newVal;
	     console.log("dataList:",dataList);
	   }
	  },{
		deep: true,
		immediate: true,
	})
	
		
	commentList.value.forEach((item,index)=>{
		if(item.reply_count){
			item.childrenShow.push(
			   ...dataList[index].comment_two.slice(0, 2)
			)
			console.log(item.childrenShow);
		}
	})
	// 展开
	function handleUnfold(item1, index1){
		isUnfold.value = true;
		console.log('展开回复');
		// 展开更多	
		if(item1.childrenShow.length !== item1.reply_count){
			let begin = item1.childrenShow.length;
			item1.childrenShow.push(
			  ...dataList[index1].comment_two.slice(begin, begin + 3)
			);
		}
		// 收起
		else{
			isUnfold.value = false;
		}	
	}
	// 收起
	function handleFold(item1, index1){
		item1.childrenShow.splice(2)
		isUnfold.value = false;
	}
	
	function handleReply(){
		console.log('评论一下');
		replyStore.show();
	}
</script>

<style scoped lang="scss">
	.title{
		background-color: white;
		padding: 30upx;
		margin-top: 20upx;
	}
	.comment{
		background-color: white;
		.comment_two{
			padding-left:12%;
			.shrink{
				display: flex;
				align-items: center;
				color: $text;
				font-size: 25upx;
				.iconfont{
					margin-left: 10upx;
					font-size: 20upx;
					font-weight: bold;
				}
			}
			.fold-more{
				display: flex;
				.fold{
					margin-left: 50upx;
				}
			}
		}
	}
	
	.empty_box{
		padding-bottom: 30upx;
		background-color: white;
		.click{
			font-size: 30upx;
			color: red;
			}
		// .tips{
		// 	color: $text;
		// 	font-size: 35upx;
		// 	.click{
		// 		color: red;
		// 	}
		// }
	}
</style>